@charset "utf-8";
/**自定义滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}

::-webkit-scrollbar-thumb {
    background-color: #9c9da0;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
::-webkit-scrollbar-thumb:hover {
    background-color: #666;
}
::-webkit-input-placeholder {
  color: #c0c4cc;
}

html,body {height: 100%;}

/*弹层查看json*/
.alert-view-json .layui-layer-content {padding:20px;}
.alert-view-json .layui-code-view .layui-code-ol li {line-height:14px;}

/*skin*/
.layui-input, .layui-select, .layui-textarea {border-color:#DCDFE6!important;border-radius:4px;}
.layui-input:focus, .layui-textarea:focus {border-color:#1E9FFF!important;}
.layui-form-onswitch {border-color:#1e9fff;background-color:#1e9fff;}
.layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed>i {color:#1e9fff;}
.layui-form-checked[lay-skin=primary] i {border-color:#1e9fff!important;background-color:#1e9fff;}
.layui-form-checkbox[lay-skin=primary]:hover i {border-color:#1e9fff;}
.layui-form-select dl dd.layui-this {background-color:#1e9fff;}

/*框架*/
.fc-f-container {display: flex;height: 100%;color:#606266;font-size:14px;background:#fff;}
.fc-f-left-side {width:260px;flex-shrink: 0;background:#fff;}
.fc-f-content {flex:1;background:#e4eaef;}
.fc-f-right-side {width:350px;flex-shrink: 0;border-left:1px solid #d8d8d8;}
.fc-f-container a {color:#1E9FFF;}
.fc-f-container a:hover {color:#017fdc;}

/*top logo*/
.fc-f-logo-wrap {height:45px;background:#fff;line-height: 45px;font-size:20px;padding-left:20px;box-sizing: border-box;color:#409eff;border-bottom:1px solid #f1e8e8;}
.fc-f-logo-wrap i {font-size:18px;background:#409eff;border-radius:10em;padding:5px;margin-right: 5px;color:#fff;}

/*top action*/
.fc-f-action-wrap {box-sizing: border-box;height:45px;line-height:42px;background:#fff;border-bottom:1px solid #f1e8e8;text-align:right;padding-right: 20px;}

/*left side*/
.fc-f-left-side .aside {height: calc(100vh - 45px);overflow-y:auto;border-right:1px solid #d8d8d8;box-sizing: border-box;padding:15px;}
.fc-components h4 {font-size:14px;margin-bottom: 10px;}
.fc-components-list {overflow:hidden;margin-bottom: 20px;}
.fc-components-list li {width:110px!important;height:32px!important;line-height: 32px;background:#f4f6fc;display: inline-block;margin-bottom:6px;box-sizing: border-box;padding-left: 5px;cursor: move;border:1px solid #f4f6fc;border-radius:3px;float:left;}
.fc-components-list li:nth-child(even) {float:right;}
.fc-components-list li:hover {border:1px dashed #1e9fff;color:#1e9fff;}
.fc-components-list li i {display: inline-block;width:20px;}

/*right side*/
.fc-f-right-side .layui-tab {margin:0;}
.fc-f-right-side .layui-tab-title {box-sizing:border-box;height:45px;}
.fc-f-right-side .layui-tab-title li {width:50%;box-sizing: border-box;line-height:45px;}
.fc-f-right-side .layui-tab-brief>.layui-tab-title .layui-this {color:#1E9FFF;}
.fc-f-right-side .layui-tab-brief>.layui-tab-more li.layui-this:after,
.fc-f-right-side .layui-tab-brief>.layui-tab-title .layui-this:after {
    border-bottom-color:#1E9FFF;
}
.fc-f-right-side .layui-tab-title .layui-this:after {height:45px;}
.fc-f-right-side>.layui-tab>.layui-tab-content {height:calc(100vh - 45px);overflow-y:auto;box-sizing:border-box;padding:15px;}
.fc-f-right-side .layui-form-label {padding:6px 15px;text-align:left;}
.fc-f-right-side .layui-input-block {min-height:32px;}
.fc-f-right-side .layui-input {height: 32px;}
.fc-f-right-side .layui-form-mid {padding:6px 0!important;}
.fc-f-right-side .layui-form-item {margin-bottom: 20px;}
.fc-f-right-side .layui-form .layui-form-switch {margin-top: 4px;}
.fc-f-right-side .layui-form-select dl {top:36px;}

/*radiogroup*/
.radiogroup {background:#fff;}
.radiogroup input {display: none!important;}
.radiogroup label {float:left;min-width:40px;padding:0 10px;cursor: pointer;border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;border-left:1px solid #e8e8e8;height:30px;line-height: 30px;transition:all .3s;}
.radiogroup label:first-child {border-radius:3px 0 0 3px;}
.radiogroup label:last-child {border-radius:0 3px 3px 0;border-right:1px solid #d8d8d8;}
.radiogroup label.is-active {background-color:#1E9FFF;color:#fff;border-color:#1E9FFF;}

/*无数据空结构*/
.empty {text-align:center;padding:30px 0;position: relative;}
.empty:before {content:"";background:url(../images/empty.svg) no-repeat center center;width:100px;height:100px;display:inline-block;}
.empty p {color:#999;}
.empty a {color:#01AAED;}
.empty a:hover {text-decoration:underline;}

/*date*/
.lay-date {background: url("") no-repeat 5px center #fff;padding-left: 25px;}
.lay-time {background: url("") no-repeat 5px center #fff;padding-left: 25px;}

/*center*/
.fc-f-form-wrap {box-sizing:border-box;padding:15px;}
.fc-f-form-wrap .content {height:calc(100vh - 75px);overflow-y:auto;overflow-x:hidden;background:#fff;box-sizing:border-box;padding:15px;position: relative;}

/*form designer*/
#form-designer {height: 100%;}
#form-designer ~ .empty {position: absolute;top:30%;left:50%;transform:translateX(-50%);}
/*pane style begin*/
.form-designer.layui-form-pane .layui-form-label {width:80px;}
.form-designer.layui-form-pane[labelposition="left"] .layui-form-label {width:80px;text-align:left;}
.form-designer.layui-form-pane .layui-input-block {margin-left:80px;}
.form-designer.layui-form-pane .layui-form-item[data-type="radio"],
.form-designer.layui-form-pane .layui-form-item[data-type="checkbox"],
.form-designer.layui-form-pane .layui-form-item[data-type="switch"],
.form-designer.layui-form-pane .layui-form-item[data-type="InputNumber"],
.form-designer.layui-form-pane .layui-form-item[data-type="progress"],
.form-designer.layui-form-pane .layui-form-item[data-type="rate"],
.form-designer.layui-form-pane .layui-form-item[data-type="slider"],
.form-designer.layui-form-pane .layui-form-item[data-type="link"] {
    border:1px solid #eee;
}
.form-designer.layui-form-pane .layui-form-item[data-type="radio"] .layui-form-label,
.form-designer.layui-form-pane .layui-form-item[data-type="checkbox"] .layui-form-label,
.form-designer.layui-form-pane .layui-form-item[data-type="switch"] .layui-form-label,
.form-designer.layui-form-pane .layui-form-item[data-type="InputNumber"] .layui-form-label,
.form-designer.layui-form-pane .layui-form-item[data-type="progress"] .layui-form-label,
.form-designer.layui-form-pane .layui-form-item[data-type="rate"] .layui-form-label,
.form-designer.layui-form-pane .layui-form-item[data-type="slider"] .layui-form-label,
.form-designer.layui-form-pane .layui-form-item[data-type="link"] .layui-form-label {
    position: absolute;left: 0;top: 0;height: 100%;border-width: 0 1px 0 0;
}
.form-designer.layui-form-pane .layui-form-item[data-type="textarea"] .layui-form-label,
.form-designer.layui-form-pane .layui-form-item[data-type="editor"] .layui-form-label {
    float: none;
    width: 100%!important;
    border-radius: 2px;
    box-sizing: border-box;
    text-align: left;
}
.form-designer.layui-form-pane .layui-form-item[data-type="textarea"] .layui-input-block,
.form-designer.layui-form-pane .layui-form-item[data-type="editor"] .layui-input-block {
    left:0;
    margin-top:-1px;
    margin-left:0!important;
}
.form-designer.layui-form-pane .layui-form-item[data-type="InputNumber"] .layui-input-block,
.form-designer.layui-form-pane .layui-form-item[data-type="rate"] .layui-input-block,
.form-designer.layui-form-pane .layui-form-item[data-type="link"] .layui-input-block {
    padding-left: 10px;
}
.form-designer.layui-form-pane .layui-form-item[data-type="slider"] .layui-input-block,
.form-designer.layui-form-pane .layui-form-item[data-type="progress"] .layui-input-block {
    padding:0 20px;
}
/*pane style end*/

/*一些表单基础设置*/
.form-designer .layui-form-item {position: relative;cursor: move;}
.form-designer h3.layui-form-title {font-size:18px;}
.form-designer .layui-input-block>.layui-inline {margin-bottom: 0;}
.form-designer .layui-rate {padding:6px 0 0 0;}
.form-designer .link {color:#1E9FFF;}
.form-designer .link:hover {text-decoration: underline;}

/*表单组件操作*/
.form-designer .layui-form-item .tool {position: absolute;width:100%;height:100%;background:rgba(30,159,255,.06);top:0;left:0;border:1px dashed #1E9FFF;display: none;z-index:20;}
.form-designer .layui-form-item .tool>div {position: absolute;bottom:-12px;right:10px;display: none;}
.form-designer .layui-form-item .tool a {display: inline-block;border-radius:10em;width:24px;height: 24px;line-height:24px;text-align:center;border-width:1px;border-style:solid;margin-left:10px;}
.form-designer .layui-form-item .tool a:nth-child(1) {border-color:#1E9FFF;color:#1E9FFF;background:#ecf5ff;}
.form-designer .layui-form-item .tool a:nth-child(1):hover {background:#1E9FFF;color:#fff;}
.form-designer .layui-form-item .tool a:nth-child(2) {border-color:#f56c6c;color:#f56c6c;background:#fef0f0;}
.form-designer .layui-form-item .tool a:nth-child(2):hover {background:#f56c6c;color:#fff;}
.form-designer .layui-form-item:not(.active):hover > .tool {background:rgba(30,159,255,.05);border:1px dashed rgba(30,159,255,.5);display: block;}
.form-designer .layui-form-item.active > .tool {display: block;border-style:solid;}
.form-designer .layui-form-item.active > .tool>div {display: block;}

/*垂直居中对齐*/
.form-designer .v-c {display: flex;align-items:center;height:38px;min-width:100px;}

/*组件 line*/
.layui-form-line {height: 0;border-width:0 0 1px 0;border-style:solid;border-color:#d8d8d8;}

/*图片上传*/
.form-designer .upload-img {width:100px;height:100px;background:#fff;border:1px dashed #d8d8d8;position: relative;cursor: pointer;overflow:hidden;border-radius:5px;display: inline-block;margin:0 5px 5px;transition:all .3s;}
.form-designer .upload-img img {width:100%;height:100%;position: absolute;top:0;left:0;z-index:2;}
.form-designer .upload-img:hover {border-color:#1E9FFF;background:#fbfbfb;}
.form-designer .upload-img.single .action {color:#999;text-align:center;padding-top: 30px;position: absolute;width:100%;height:100%;transition:all .3s;}
.form-designer .upload-img.single .action i {font-size:20px;}
.form-designer .upload-img.single[uploaded] .action {opacity:0;}
.form-designer .upload-img.single[uploaded]:hover .action {z-index:3;background:rgba(0,0,0,.4);color:#fff;opacity:1;}
.form-designer .upload-img.multiple .action {color:#999;text-align:center;position: absolute;width:100%;height:100%;line-height:100px;transition:all .3s;}
.form-designer .upload-img.multiple .action i {font-size:20px;}
.form-designer .upload-img.multiple[uploaded] .action {opacity:0;}
.form-designer .upload-img.multiple[uploaded]:hover .action {z-index:3;background:rgba(0,0,0,.4);color:#fff;line-height: normal;padding-top: 30px;opacity:1;}
.form-designer .layui-upload-choose {max-width: initial;}

/*栅格布局*/
.form-designer [data-type="gridLayout"] {padding:20px;border:1px solid transparent;}
.form-designer [data-type="gridLayout"] .column {border:1px solid transparent;}
.form-designer [data-type="gridLayout"] .column .layout {position: relative;z-index: 2;min-height:60px;box-sizing: border-box;}
.form-designer [data-type="gridLayout"] .column .layout:after {content:"拖拽组件到这里";position: absolute;width:100%;height:100%;color:#a7b1bd;text-align:center;line-height:60px;background:#f1f0f0;top:0;left:0;z-index: -1;}
.form-designer [data-type="gridLayout"] .column .layout.active {border:1px solid #1e9fff;}
.form-designer [data-type="gridLayout"] .column[full] .layout:after {display: none;}
.form-designer [data-type="gridLayout"].active {border-color:#1E9FFF;}
.form-designer [data-type="gridLayout"] .tool.hollow {border:none!important;height:auto;top:auto;bottom:0;}
.form-designer [data-type="gridLayout"]:not(.active):hover {border-color:rgba(30,159,255,.5);border-style: dashed;}
.form-designer [data-type="gridLayout"] .column.active {border-color:#1E9FFF;}
.form-designer [data-type="gridLayout"] .column.active > .tool {display: block;}
.form-designer [data-type="gridLayout"] .column.active > .tool > div {display: block;}
.form-designer [data-type="gridLayout"] .column:not(.active):hover {border-color:rgba(30,159,255,.5);border-style: dashed;}

/*内联布局*/
.form-designer [data-type="formLayout"] {padding:20px 0;border:1px solid transparent;}
.form-designer [data-type="formLayout"].active {border-color:#1E9FFF;}
.form-designer [data-type="formLayout"] .tool.hollow {border:none!important;height:auto;top:auto;bottom:0;}
.form-designer [data-type="formLayout"]:not(.active):hover {border-color:rgba(30,159,255,.5);border-style: dashed;}
.form-designer .layui-inline-col {min-width:310px;min-height:38px;background:#f1f0f0;box-sizing: border-box;float:left;}
.form-designer .layui-inline-col:after {content: "添加组件";text-align:center;line-height:36px;width:100%;position: absolute;color:#a7b1bd;top:0;}
.form-designer .layui-inline-col[full] {background: none;}
.form-designer .layui-inline-col[full]:after {display: none;}
.form-designer .layui-inline-col:not([full],.active):hover {border:1px dashed rgba(30,159,255,.5);}
.form-designer .layui-inline-col.active {border:1px solid #1E9FFF;}
.form-designer .layui-inline-col.active .tool {display: block;}
.form-designer .layui-inline-col.active .tool > div{display: block;}
.form-designer .layui-inline-col .layui-form-item {margin-bottom: 0;}

/*表单尺寸*/
.form-designer[size="small"] .layui-input,
.form-designer[size="small"] .layui-select,
.form-designer[size="small"] .layui-textarea {height:34px;}
.form-designer[size="small"] .layui-form-label {padding:7px 15px;}
.form-designer[size="small"] .layui-input-block {min-height:34px;}
.layui-form-pane[size="small"] .layui-form-label {height:34px;}
.form-designer[size="small"] .layui-form-select dl {top: 38px;}
.form-designer[size="small"] .layui-rate {padding-top:4px;}
.form-designer[size="small"] .v-c {height: 34px;}
.form-designer[size="mini"] .layui-input,
.form-designer[size="mini"] .layui-select,
.form-designer[size="mini"] .layui-textarea {height:30px;}
.form-designer[size="mini"] .layui-form-label {padding:5px 15px;}
.form-designer[size="mini"] .layui-input-block {min-height:30px;}
.layui-form-pane[size="mini"] .layui-form-label {height:30px;}
.form-designer[size="mini"] .layui-rate {padding-top:2px;}
.form-designer[size="mini"] .v-c {height: 30px;}
.form-designer[labelposition="left"] .layui-form-label {text-align:left;}
.form-designer[labelposition="top"] .layui-form-label {float:none;padding-left:0;padding-bottom:5px;text-align:left;width:auto!important;}
.form-designer[labelposition="top"] .layui-input-block {margin-left:0!important;}

/*拖拽style*/
.ui-sortable-placeholder {
  border: 1px dashed #1E9FFF !important;
  visibility: visible !important;
  background:#f6f7ff;
}

.draggable {cursor: move;}
.ui-sortable-helper {
    background:#fff
}

/*组件属性*/
#components-setting-form input {color:#606266;}
#components-setting-form label {text-align:right;padding:6px 15px 6px 0;}
#components-setting-form .layui-input-block {margin-left: 95px;}
#components-setting-form .layui-form-radio {margin-top:2px;}

/*组件属性 radio*/
.radio-group .item {margin-bottom: 10px;}
.radio-group .item > div {display: flex;margin-bottom: 5px;}
.radio-group .item > div input {width:170px;margin-right: 5px;}
.radio-group .layui-form-radio {padding-right: 0;margin:3px 0 0;}
.radio-group .item > div > a {line-height:30px;}
.radio-group .item > div > a i {font-size:18px;color:#f56c6c;}

/*组件属性 checkbox*/
.checkbox-group .layui-form-checkbox[lay-skin=primary] {margin-top: 6px!important;}
.checkbox-group .item {margin-bottom: 10px;}
.checkbox-group .item > div {display: flex;margin-bottom: 5px;}
.checkbox-group .item > div input {width:170px;margin-right: 5px;}
.checkbox-group .item > div > a {line-height:30px;}
.checkbox-group .item > div > a i {font-size:18px;color:#f56c6c;}

